<template>
  <div class="monitor-index">
    <div class="monitor-header">
      <div class="btn-wrap">
        <el-button
          style="margin-left: 20px;font-size: 20px;color: #fff;"
          type="text"
          icon="el-icon-full-screen"
          size="small"
          @click="handleFull"
        >{{$t('nav.fullScreen')}}</el-button>
        <el-button
          style="margin-left: 20px;font-size: 20px;color: #fff;"
          type="text"
          icon="el-icon-menu"
          size="small"
          @click="toManage"
        >{{$t('nav.enter')}}</el-button>
        <el-button
          style="margin-left: 20px;font-size: 20px;color: #fff;"
          type="text"
          icon="el-icon-switch-button"
          size="small"
          @click="logout"
        >{{$t('nav.logout')}}</el-button>
      </div>
      <div class="page-title">
        <div class="logo-1">
          <img v-if="logoUrl" style="height: 70%;" src="../../assets/logo/xzlogo.png" alt="">
          <img v-else style="width:100%;height: 100%;" src="../../assets/logo/logo-en.png" alt="">
        </div>
        <span v-if="logoUrl" style="font-size: 44px;">{{$t('login.title')}}</span>
        <span v-else >{{$t('login.title')}}</span>
      </div>
      <div class="date-wrap" >{{ dateTime }}</div>
    </div>
    <div class="monitor-main">
      <div class="main-left">
        <part-box :title="$t('index.sitesOverview')" style="flex:0 0 auto;height: 262px;">
          <div class="part-box-wrap overview-box">
            <div class="overview-row">
              <div class="overview-col">
                <div class="icon-box">
                  <img src="../../assets/img/icon-1.png" alt="">
                </div>
                <div class="part-data-box">
                  <div class="part-data-value"><span>{{siteData.total}}</span>{{$t('index.zuo')}}</div>
                  <div class="part-data-title">{{$t('index.numberOfSites')}}</div>
                </div>
              </div>
              <div class="overview-col">
                <div class="icon-box">
                  <img src="../../assets/img/icon-2.png" alt="">
                </div>
                <div class="part-data-box">
                  <div class="part-data-value"><span>{{siteData.sumEnergy}}</span>kWh</div>
                  <div class="part-data-title">{{$t('index.totalCapacity')}}</div>
                </div>
              </div>
            </div>
            <div class="overview-row">
              <div class="overview-col">
                <div class="icon-box">
                  <img src="../../assets/img/icon-3.png" alt="">
                </div>
                <div class="part-data-box">
                  <div class="part-data-value"><span>{{siteData.runDays}}</span>{{$t('index.days')}}</div>
                  <div class="part-data-title">{{$t('index.safeOperationDays')}}</div>
                </div>
              </div>
              <div class="overview-col">
                <div class="icon-box">
                  <img src="../../assets/img/icon-4.png" alt="">
                </div>
                <div class="part-data-box">
                  <div class="part-data-value"><span>{{siteData.sumPower}}</span>KW</div>
                  <div class="part-data-title">{{$t('index.totalEnergyStoragePower')}}</div>
                </div>
              </div>
            </div>
          </div>
        </part-box>
        <part-box  :title="$t('index.alarmStatistics')" style="flex:0 0 auto;height: 262px;margin-top: 20px;">
          <div class="part-box-wrap chart-box">
            <bar-chart style="width: 100%;height: 100%;" :chart-data="alarmStatic"></bar-chart>
          </div>
        </part-box>
        <part-box  :title="$t('index.deviceDistribution')" style="margin-top: 20px;flex: 1;">
          <div class="part-box-wrap chart-box">
            <pie-chart style="width: 100%;height: 100%;" :chart-data="deviceDBdData"></pie-chart>
          </div>
        </part-box>
      </div>
      <div class="main-middle">
        <div class="map-wrap">
          <v-map :chart-data="barData" style="width: 100%;height: 100%;"></v-map>
        </div>
        <div class="data-view">
          <div class="data-item">
            <div class="item-value">{{totalData.totalPowerGeneration}} kWh</div>
            <div class="item-name">{{$t('index.cumulativePowerGenerationCapacity')}}</div>
          </div>
          <div class="data-item">
            <div class="item-value">{{totalData.totalCharge}} kWh</div>
            <div class="item-name">{{$t('index.cumulativeChargingCapacity')}}</div>
          </div>
          <div class="data-item">
            <div class="item-value">{{totalData.totalElectricPowerConsumption}} kWh</div>
            <div class="item-name">{{$t('index.cumulativeElectricityConsumption')}}</div>
          </div>
        </div>
      </div>
      <div class="main-right">
        <part-box :title="$t('index.powerChart')" style="flex:0 0 auto;height: 262px;">
          <div class="part-box-wrap chart-box">
            <line-chart style="width: 100%;height: 100%;" :chart-data="lineData"></line-chart>
          </div>
        </part-box>
        <part-box :title="$t('index.DailyChargingAndDischargingCapacity')" style="flex:1;margin-top: 20px;">
          <div class="part-box-wrap chart-box">
            <shadow-chart style="width: 100%;height: 100%;" :chart-data="shadowData"></shadow-chart>
          </div>
        </part-box>
        <part-box :height="220" :title="$t('index.alarmInformation')" style="flex:0 0 auto;height: 302px;margin-top: 20px;">
          <div class="part-box-wrap list-box">
            <div class="alarm-item" v-for="(item,index) in eventData" :key="item.id">
              <div class="item-index">{{index+1}}</div>
              <div class="item-device">{{item.deviceName}}</div>
              <div class="item-event">{{item.eventName}}</div>
              <div class="item-time">{{item.createTime}}</div>
              <div class="item-status">
                <span style="color: #71e2a3;" v-if="item.finshTime">{{$t('index.alarmActive')}}</span>
                <span style="color: #71e2a3;" v-else-if="item.isHandle==1">{{$t('index.alreadyProcessed')}}</span>
                <span style="color: #ffba00;" v-else>{{$t('index.inProgress')}}</span>
              </div>
            </div>
          </div>
        </part-box>
      </div>
    </div>
    <div class="monitor-footer" >{{ $t('index.copyRight') }}</div>
  </div>
</template>
<script>
  import barChart from "./barChart";
  import pieChart from "./pieChart.vue";
  import partBox from "./partBox.vue";
  import lineChart from './lineChart.vue';
  import shadowChart from "./shadowChart.vue";
  import vMap from "./map.vue";
  import Screenfull from '@/components/Screenfull';
  import sf from 'screenfull';
  import {i18n} from '../../i18n/index'
  import {selectStationReport,selectAlarmReport,municipalElectricityReportList,deviceTotalReport,listEventData,deviceDistribution,realTimePowerTrend} from '@/api/index/index'
  export default {
  	components:{
		  barChart,
      pieChart,
      partBox,
      lineChart,
      shadowChart,
      vMap
    },
  	data(){
		  return{
			  dateTime:'',
			  timer:null,
        dataTimer:null,
        barData:{
          data:[222,333,444]
        },
        siteData:{
          runDays:'-',
          sumEnergy:'-',
          sumPower:'-',
          total:'-'
        },
        alarmStatic:{
          xData:[],
          yData:[]
        },
        shadowData:{
          xdata:[],
          ydata1:[],
          ydata2:[]
        },
        totalData:{
          totalCharge:'-',
          totalElectricPowerConsumption:'-',
          totalPowerGeneration:'-'
        },
        eventData:[],
        deviceDBdData:{
          data:[]
        },
        lineData:{
          xdata:[],
          totalCharge:[],
          totalElectricPowerConsumption:[],
          totalPowerGeneration:[]
        }
      }
    },
    computed:{
      logoUrl(){
        return i18n.locale=='zh';
      },
    },
    created() {
	    this.setDateTime()
	    this.timer = setInterval(()=>{
		    this.setDateTime()
	    },1000)
      this.initPageData()
      this.dataTimer = setInterval(()=>{
		    this.initPageData()
	    },30000)
    },
	  beforeDestroy() {
		  this.timer&&clearInterval(this.timer)
		  this.dataTimer&&clearInterval(this.dataTimer)
	  },
    methods:{
      initPageData(){
        this.getSiteStatic();
        this.getAlarmData();
        this.getElectricityReportList();
        this.getDeviceTotalReport();
        this.getEventData();
        this.getDeviceDistribution();
        this.getRealTimePowerTrend();
      },
	    setDateTime(){
		    let date = new Date().getTime();
		    this.dateTime = this.parseTime(date,'{y}/{m}/{d}  {h}:{i}:{s}')
	    },
      toManage(){
        this.$router.push('/es/index')
      },
      async logout() {
        this.$confirm(this.$t('nav.logiutConfirm'), this.$t('common.prompt'), {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$router.push('/login')
          })
        }).catch(() => {});
      },
      handleFull(){ 
        if (!sf.isEnabled) {
          // this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
          return false
        }
        sf.toggle()
      },
      //获取电站统计
      getSiteStatic(){
        selectStationReport().then(res=>{
          this.siteData = res.data;
        })
      },
      //获取告警信息
      getAlarmData(){
        selectAlarmReport().then(res=>{
          let xdata = [];
          let ydata = [];
          res.data.forEach(el=>{
            ydata.push(el.alarmLevelName);
            xdata.push(el.alarmTotal);
          })
          this.alarmStatic = {
            xdata,ydata
          }
        })
      },
      //日充放电量
      getElectricityReportList(){
        let yesterday = new Date().getTime() - 86400000;
        let last7day = new Date().getTime() - 86400000*7;
        const params = {
          startDate:this.parseTime(last7day,'{y}-{m}-{d} {h}:{i}:{s}'),
          endDate:this.parseTime(yesterday,'{y}-{m}-{d} {h}:{i}:{s}')
        }
        municipalElectricityReportList(params).then(res=>{
          let xdata = [];
          let ydata1 = [];
          let ydata2 = [];
          res.data.forEach(el=>{
            xdata.push(el.label);
            ydata1.push(el.dailyChargingCapacity);
            ydata2.push(-el.dailyPowerConsumption);
          })
          this.shadowData = {
            xdata,ydata1,ydata2
          }
          console.log(this.shadowData)
        })
      },
      //储能汇总统计
      getDeviceTotalReport(){
        deviceTotalReport().then(res=>{
          this.totalData = res.data;
        })
      },
      //告警列表
      getEventData(){
        listEventData().then(res=>{
          this.eventData = res.rows;
        })
      },
      //设备分布
      getDeviceDistribution(){
        deviceDistribution().then(res=>{
          let data = [];
          res.data.forEach(el=>{
            data.push({
              value: el.total,
              name: el.name
            })
          })
          this.deviceDBdData = {
            data
          };
        })
      },
      //获取电站功率
      getRealTimePowerTrend(){
        let xdata = [];
        let totalCharge = [],totalElectricPowerConsumption=[],totalPowerGeneration=[];
        realTimePowerTrend().then(res=>{
          res.data.forEach(el=>{
            xdata.push(el.label);
            totalCharge.push(el.totalCharge);
            totalElectricPowerConsumption.push(el.totalElectricPowerConsumption);
            totalPowerGeneration.push(el.totalPowerGeneration);
          })
          this.lineData = {
            xdata,totalCharge,totalElectricPowerConsumption,totalPowerGeneration
          }
        })
      }
    },
    watch:{

    }
  }
</script>
<style lang="scss">
  ::-webkit-scrollbar {
    display: none;
  }
  .monitor-index{
    background: #000E22;
    width: 100vw;
    height: 100vh;
    min-width: 1920px;
    min-height: 1080px;
    overflow: hidden;
    position: relative;
    .monitor-header{
      position: relative;
      width: 100%;
      height: 98px;
      background-image: url("../../assets/img/monitor-header.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      .btn-wrap{
        position: absolute;
        right: 100px;
        top: 38px;
        text-align: right;
        .logo-1{
          display: inline-block;
          // width: 180px;
          height: 60px;
          vertical-align: middle;
          margin-right: 10px;
        }
        .logo-2{
          display: inline-block;
          width: 152px;
          height: 45px;
          vertical-align: middle;
          margin-left: 50px;
        }
      }
      .page-title{
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 35px;
        margin: 20px auto 0;
        letter-spacing: 1px;
        .logo-1{
          display: inline-block;
          // width: 180px;
          height: 70px;
          vertical-align: middle;
          margin-right: 10px;
        }
        // font-weight: bold;
      }
      .date-wrap{
        position: absolute;
        left: 120px;
        top: 46px;
        color: #fff;
        font-size: 26px;
        letter-spacing: 1px;
      }
    }
    .monitor-main{
      width: 1800px;
      height: calc(100vh - 98px - 65px - 60px);
      min-height: calc(1080px - 98px - 65px - 60px);
      margin: 30px auto;
      display: flex;
      flex-wrap: nowrap;
      .main-left{
        flex: 0 0 auto;
        width: 450px;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .main-middle{
        flex: 1;
        height: 100%;
        margin: 0 20px;
        display: flex;
        flex-direction: column;
        .map-wrap{
          width: 100%;
          flex: 1;
          overflow: hidden;
        }
        .data-view{
          flex: 0 0 auto;
          margin-top: 20px;
          width: 100%;
          height: 185px;
          background-image: linear-gradient(to right,rgba(0, 105, 131,0.16),rgba(0, 105, 131,0.6),rgba(0, 105, 131,0.16));
          display: flex;
          flex-wrap: nowrap;
          padding: 0 20px;
          box-sizing: border-box;
          .data-item{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #fff;
            .item-value{
              font-size: 35px;
            }
            .item-name{
              font-size: 18px;
              margin-top: 20px;
              text-align: center;
              height: 50px;
            }
          }
        }
      }
      .main-right{
        flex: 0 0 auto;
        width: 450px;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      
    }
    .monitor-footer{
      position: absolute;
      bottom: 0;
      height: 65px;
      width: 100%;
      // background-image: linear-gradient(to bottom,#042F44,#001024)
      background-image: url("../../assets/img/monitor-footer.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 65px;
      color: #fff;

    }
    .part-box-wrap{
      width: 100%;
      height: 100%;
    }
    .overview-box{
      display: flex;
      flex-direction: column;
      .overview-row{
        flex: 1;
        display: flex;
        flex-wrap: nowrap;
        padding: 0 30px;
        .overview-col{
          display: flex;
          width: 50%;
          height: 100%;
          align-items: center;
          justify-content: center;
          .icon-box{
            width: 70px;
            height: 80px;
            img{width: 100%;height: 100%;}
          }
          .part-data-box{
            color: #fff;
            margin-left: 10px;
            flex: 1;
            .part-data-value{
              font-size: 16px;
              white-space: nowrap;
              >span{
                font-size: 30px;
                margin-right: 5px;
              }
            }
            .part-data-title{
              font-size: 16px;
            }
          }
        }
      }
    }
    .chart-box{
      width: 100%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
    .list-box{
      width: 100%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
      overflow-y: auto;
      .alarm-item{
        width: 100%;
        display: flex;
        height: 30px;
        line-height: 30px;
        color: #fff;
        font-size: 12px;
        white-space: nowrap;
        .item-index{
          width: 20px;
          flex: 0 0 auto;
          text-align: center;
        }
        .item-device{
          width: 100px;
          flex: 0 0 auto;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .item-event{
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
        }
        .item-time{
          width: 100px;
          flex: 0 0 auto;
          text-align: left;
        }
        .item-status{
          width: 80px;
          flex: 0 0 auto;
          text-align: right;
        }
      }
    }
  }
</style>
